import { Button } from 'antd';
import type React from 'react';
import { useRef } from 'react';
import PaintBoard from '@/components/MapView/Mapless/paint';
import {
  type Test2Point,
  test2Point,
} from '@/components/MapView/Mapless/paint/test2Points';
import {
  calculateObjectsInPolygon,
  type PaintMode,
} from '@/components/MapView/Mapless/paint/utils';
import styles from '../../index.module.less';
import type { TestControlProps } from '../types';

type TestStation = {
  id: number;
  longitude: number;
  latitude: number;
  a?: string;
  b?: string;
};

const Index: React.FC<TestControlProps> = ({ maplessRef }) => {
  const paintRef = useRef<PaintBoard>(undefined);
  const test2PtnsRef = useRef<Test2Point>(undefined);

  const onInit = () => {
    if (maplessRef.current) {
      paintRef.current = new PaintBoard(maplessRef.current, { maxCount: 2 });
      paintRef.current.onDrawingEnd = (paint) => {
        console.log('onDrawingEnd', paint);
        if (test2PtnsRef.current && paint) {
          const selected = calculateObjectsInPolygon<TestStation>(
            test2PtnsRef.current.points,
            paint,
          );
          console.log(selected);
        }
      };
      paintRef.current.onDrawing = (paint) => {
        if (test2PtnsRef.current && paint) {
          const selected = calculateObjectsInPolygon<TestStation>(
            test2PtnsRef.current.points,
            paint,
          );
          console.log(selected);
        }
      };
    }
  };

  const onTest2Points = () => {
    if (maplessRef.current) {
      test2PtnsRef.current = test2Point(maplessRef.current.map);
      test2PtnsRef.current?.init();
      test2PtnsRef.current?.test();
    }
  };

  const onPaintStart = () => {
    paintRef.current?.startDraw();
  };

  const onPaint = (mode: PaintMode) => {
    paintRef.current?.setPaintMode(mode);
  };

  const onPaintStop = () => {
    paintRef.current?.exitDraw();
  };

  const onPaintOver = () => {
    paintRef.current?.destroy();
  };

  return (
    <div className={styles.test}>
      <Button onClick={onTest2Points}>显示测试点</Button>
      <Button onClick={onInit}>配置选择工具</Button>
      <Button onClick={onPaintStart}>启用绘制</Button>
      <Button onClick={() => onPaint('select')}>选择</Button>
      <Button onClick={() => onPaint('freedom')}>自由</Button>
      <Button onClick={() => onPaint('circle')}>圆圈</Button>
      <Button onClick={() => onPaint('rectangle')}>矩形</Button>
      <Button onClick={onPaintStop}>禁用绘制</Button>
      <Button onClick={onPaintOver}>清除</Button>
    </div>
  );
};

export default Index;
